<template>
  <layout title="loadmore加载更多">

    <layout-content title="基础使用">
      <tn-load-more :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more status="loading" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more status="loading" loading-animation-type="flower" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more status="nomore" :custom-style="loadmoreCustomStyle"></tn-load-more>
    </layout-content>

    <layout-content title="修改提示文案">
      <tn-load-more :load-tips-text="customTipsText" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more status="loading" :load-tips-text="customTipsText" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more status="nomore" :load-tips-text="customTipsText" :custom-style="loadmoreCustomStyle"></tn-load-more>
    </layout-content>

    <layout-content title="隐藏没有数据时的文案">
      <tn-load-more status="nomore" no-more-dot :custom-style="loadmoreCustomStyle"></tn-load-more>
    </layout-content>

    <layout-content title="修改颜色">
      <tn-load-more color="tn-color-gray" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more color="#01BEFF" loading-animation-color="#01BEFF" status="loading" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more color="tn-color-grey" status="nomore" :custom-style="loadmoreCustomStyle"></tn-load-more>
    </layout-content>

    <layout-content title="修改字体尺寸">
      <tn-load-more font-size="40" :custom-style="loadmoreCustomStyle"></tn-load-more>
      <tn-load-more status="loading" font-size="40" :custom-style="loadmoreCustomStyle"></tn-load-more>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnLoadMore from '@/tuniao-ui/components/tn-load-more/src/LoadMore.vue'
import { LoadMoreTipsText } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 自定义loadmore样式
const loadmoreCustomStyle: CSSProperties = {
  marginTop: '20rpx'
}

// 自定义提示文案
const customTipsText: LoadMoreTipsText = {
  loadmore: '还有内容哦',
  loading: '快速加载中...',
  nomore: '啥都没有了啊'
}
</script>

<style lang="scss" scoped>
</style>
